<!--
 * @Author: White
 * @description: 最新音乐
 * @LastEditTime: 2021-08-26 16:07:26
-->

<template>
    <!-- 分类 -->
    <div class="type-tab">
        <div class="tab-item" 
            v-for="(item, index) in tab" :key="index" 
            :class="[currentTab === item.value && 'active']"
            @click="toggleTab(item.value)">
            {{item.label}}
        </div>
    </div>
    <!-- 新歌速递 -->
    <div class="content" v-if="currentTab == 'latestSongs'">
        <div class="content-type">
            <ul>
                <li 
                    v-for="(item, index) in type" :key="index" 
                    :class="[classTab === item.value && 'active']"
                    @click="select(item.value)">
                    {{item.label}}
                </li>
            </ul>
            <div class="allplay">播放全部</div>
        </div>
        <div class="card-wrapper-loading"
            v-show="loading1"
            v-loading="loading1"
            element-loading-text="载入中..."
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(255, 255, 255)">
        </div>
        <div class="content-list" v-show="!loading">
            <div class="content-item" v-for="(item, index) in singerList" :key="index"  :class="{'active':index%2 == 0}">
                <div class="item">
                    <div class="index">{{index + 1}}</div>
                    <img :src="item.album.picUrl" alt="">
                    <div class="title">{{item.name}}</div>
                </div>
                <div class="author">
                    <span v-for="(ite, ind) in item.artists">{{ite.name}}</span>
                </div>
                <div class="ablum">
                    {{item.album.name}}
                </div>
                <div class="time">
                    {{item.duration}}
                </div>
            </div>
        </div>
    </div>

    <!-- 新碟上架 -->
    <div class="content" v-if="currentTab == 'latestAlbums'">
        <div class="content-type">
            <ul>
                <li 
                    v-for="(item, index) in type" :key="index" 
                    :class="[classTab === item.value && 'active']"
                    @click="select(item.value)">
                    {{item.label}}
                </li>
            </ul>
            <div class="allplay">推荐</div>
        </div>
        <div class="card-wrapper-loading"
            v-show="loading"
            v-loading="loading"
            element-loading-text="载入中..."
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(255, 255, 255)">
        </div>
        <div class="DvdList">
            <div class="DvdList-left">
                <div class="title">
                    <div>本周</div>
                    <div>新碟</div>
                </div>
            </div>
            <div class="DvdList-right">
                <div class="DvdList-right-item" v-for="(item, index) in newDvdList" :key="index">
                    <img :src="item.blurPicUrl" alt="">
                    <div class="auther">{{item.company}}</div>
                    <div class="desc">{{item.name}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { defineComponent, reactive, onMounted, toRefs } from 'vue'
import { getNewspeed, getNewDvd } from '@/api/music'
export default defineComponent ({
    setup () {
        const data = reactive({
            loading: false,
            loading1: false,
            currentTab: 'latestSongs',
            classTab: '0',
            tab: [
                { label: '新歌速递', value: 'latestSongs' },
                { label: '新碟上架', value: 'latestAlbums' }
            ],
            type: [
                { label: '全部', value: '0'},
                { label: '华语', value: '7'},
                { label: '欧美', value: '96'},
                { label: '日本', value: '8'},
                { label: '韩国', value: '16'}
            ],
            singerList: [],
            newDvdList: []
        })

        onMounted( async() => {
            getData()
            getDvd()
        })

        // 获取新歌数据
        const getData = ( async(parms) => {
            data.loading = true
            const res = await getNewspeed(parms)
            if (res.data.code === 200) {
                data.singerList = res.data.data
                data.loading = false
            }
        })

        // 获取新碟数据
        const getDvd = ( async() => {
            data.loading1 = true
            const res = await getNewDvd()
            if (res.data.code === 200) {
                data.newDvdList = res.data.albums
                data.loading1 = false
            }
        })

        // 切换tab
        const toggleTab = (value) => {
            if (value !== data.currentTab) {
                data.currentTab = value
            }
        }
        const select = (value) => {
            if (value !== data.classTab) {
                data.classTab = value
                let parms = {type: value}
                getData(parms)
            }
        }
        return {
            ...toRefs(data),
            getData,
            getDvd,
            toggleTab,
            select
        }
    }
})
</script>

<style lang="scss" scoped>
.type-tab {
    width: 240px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 1px solid rgb(187, 187, 187);
    border-radius: 16px;
    .tab-item  {
        text-align: center;
        width: 120px;
        line-height: 32px;
        display: inline-block;
        border-radius: 16px;
        font-size: 13px;
        color: rgb(51, 51, 51);
        border-radius: 16px;
        cursor: pointer;
    }
    .active {
        height: 32px;
        border-radius: 55px;
        color: #fff;
        font-weight: bold;
        background-color: #bbb;
        &:hover {
        background-color: #bbb;
        }
    }
}
.content {
    .content-type {
        width: 100%;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        ul {
            li {
                float: left;
                font-size: 14px;
                color: rgb(102, 102, 102);
                margin-right: 28px;
                cursor: pointer;
            }
            .active {
                color: #000;
                font-weight: 700;
            }
        }
        .allplay {
            display: inline-flex;
            align-items: center;
            background-image: linear-gradient(
        90deg
        , rgb(252, 82, 68), rgb(212, 58, 50));
            color: rgb(255, 255, 255);
            margin-right: 8px;
            padding: 5px 12px;
            border-radius: 12px;
            font-size: 13px;
            cursor: pointer;
        }
    }
    .content-list {
        .content-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 0px;
            .item {
                display: flex;
                align-items: center;
                width: 50%;
                .index {
                    color: rgb(102, 102, 102);
                    font-size: 14px;
                    width: 5%;
                    margin-left: 10px;
                }
                img {
                    width: 60px;
                    height: 60px;
                    box-sizing: border-box;
                    border: 1px solid rgb(234, 234, 234);
                    border-radius: 4px;
                }
                .title {
                    padding: 0px 8px;
                    box-sizing: border-box;
                    color: rgb(51, 51, 51);
                    font-size: 14px;
                }
            }
            .author {
                width: 20%;
                span {
                    width: 160px;
                    box-sizing: border-box;
                    color: rgb(102, 102, 102);
                    font-size: 12px;
                }
            }
            .ablum {
                width: 20%;
                width: 160px;
                padding: 0px 8px;
                box-sizing: border-box;
                color: rgb(102, 102, 102);
                font-size: 12px;
            }
            .time {
                width: 10%;
                padding: 0px 8px;
                box-sizing: border-box;
                color: rgb(102, 102, 102);
                font-size: 12px;
            }
        }
        .active {
            background-color: #fafafa;
        }
    }
    .card-wrapper-loading {
        height: calc(100vh - 420px);
        z-index: 9;
        top: 0px;
        :deep(.el-loading-spinner) {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        :deep(.el-icon-loading) {
            color: #666;
        }
        :deep(.el-loading-text) {
            margin-left: 2px;
            color: #666;
        }
    }
    .DvdList {
        display: flex;
        .DvdList-left {
            width: 10%;
            .title {
                position: sticky;
                top: 20px;
                text-align: center;
                font-weight: 700;
                div {
                    text-align: center;
                    margin: 4px;
                }
            }
        }
        .DvdList-right {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            width: 90%;
            .DvdList-right-item {
                width: 140px;
                box-sizing: border-box;
                margin-bottom: 36px;
                margin-right: 10px;
                img {
                    width: 140px;
                    height: 140px;
                    border-radius: 10px;
                }
                .auther {
                    font-size: 14px;
                    color: #666;
                    text-overflow: -o-ellipsis-lastline;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    line-clamp: 2;
                    -webkit-box-orient: vertical;
                    margin: 10px 0px;
                }
                .desc {
                    font-size: 13px;
                    text-overflow: -o-ellipsis-lastline;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
            }
        }
    }
}
</style>
